<template>
  <div>
    <simple-data-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :size="size"
    >
      <el-form
        ref="info"
        :model="info"
        :rules="dialogRule"
        label-position="top"
        :inline="true"
      >
        <el-form-item
          :label="$t('tenant.userManage.telephone')"
          required
        >
          <el-input
            v-model="info.telephone"
            :placeholder="$t('common.enter')+$t('tenant.userManage.telephone')"
            clearable
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.userManage.userName')"
          prop="userName"
          required
        >
          <el-input
            v-model="info.userName"
            :placeholder="$t('common.enter')+$t('tenant.userManage.userName')"
            clearable
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.userManage.email')"
          prop="email"
          required
        >
          <el-input
            v-model="info.email"
            :placeholder="$t('common.enter')+$t('tenant.userManage.email')"
            clearable
          />
        </el-form-item>
        <el-form-item
          :label="$t('tenant.userManage.sex')"
          prop="sex"
          required
        >
          <el-radio-group v-model="info.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('tenant.userManage.userType')"
          prop="userType"
          required
        >
          <el-select
            v-model="info.userType"
            :placeholder="$t('common.select')+$t('tenant.userManage.userType')"
            @change="changeUserType"
          >
            <el-option
              label="总公司"
              value="1"
            />
            <el-option
              label="区域"
              value="2"
            />
            <el-option
              label="门店"
              value="3"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="info.userType === '2'"
          :label="$t('tenant.userManage.areaCode')"
          prop="areaCode"
        >
          <el-select
            v-model="info.areaCode"
            :placeholder="$t('common.select')+$t('tenant.userManage.areaCode')"
          >
            <el-option
              v-for="(area,index) in areaList"
              :key="index"
              :label="area.areaName"
              :value="area.areaCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="info.userType === '3'"
          :label="$t('tenant.userManage.store')"
          prop="store"
          readonly
          class="input-custom"
        >
          <el-select
            ref="storeRef"
            v-model="info.store"
            multiple
            collapse-tags
            :placeholder="$t('common.select')+$t('tenant.userManage.store')"
            @focus="showStore"
          >
            <el-option
              v-for="item in storeOption"
              :key="item.storeCode"
              :label="item.storeName"
              :value="item.storeCode"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog_btn"
      >
        <el-button @click="dialogVisible=false">{{ $t('common.cancel') }}</el-button>
        <!-- <el-button @click="reset()">{{$t('common.reset')}}</el-button> -->
        <el-button
          type="primary"
          @click="confirm"
        >{{ $t('common.ok') }}</el-button>
      </div>
    </simple-data-dialog>
    <select-store
      ref="selectStore"
      @confirm="confirmStore"
    />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import selectStore from './selectStore'
import SimpleDataDialog from '@/components/SimpleDataDialog'
import merchantApi from '@/api/tenant/merchant'
export default {
  name: '',
  components: {
    selectStore,
    SimpleDataDialog
  },
  data() {
    return {
      size: 'small',
      dialogRule: {
        telephone: [
          {
            required: true,
            message:
              this.$t('common.enter') + this.$t('tenant.userManage.telephone'),
            trigger: ['blur', 'change']
          },
          {
            required: true,
            validator: (rule, value, callback) => {
              this.$util.validIpt(value, callback, 'tel')
            },
            trigger: ['blur', 'change']
          }
        ],
        userName: [
          {
            required: true,
            message:
              this.$t('common.enter') + this.$t('tenant.userManage.userName'),
            trigger: ['blur', 'change']
          }
        ],
        email: [
          {
            required: true,
            message: this.$t('common.enter') + this.$t('tenant.userManage.email'),
            trigger: ['blur', 'change']
          },
          {
            required: true,
            validator: (rule, val, callback) => {
              this.$util.validIpt(val, callback, 'email')
            },
            trigger: 'blur'
          }
        ],
        userType: [
          {
            required: true,
            message:
              this.$t('common.select') + this.$t('tenant.userManage.userType'),
            trigger: ['blur', 'change']
          }
        ],
        areaCode: [
          {
            required: true,
            validator: (rule, value, callback) => {
              // eslint-disable-next-line eqeqeq
              if (this.info.userType == '2') {
                if (value) {
                  callback()
                } else {
                  callback(
                    this.$t('common.select') +
                    this.$t('tenant.userManage.areaCode')
                  )
                }
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ],
        store: [
          {
            required: true,
            validator: (rule, value, callback) => {
              // eslint-disable-next-line eqeqeq
              if (this.info.userType == '3') {
                if (this.info.store && this.info.store.length > 0) {
                  callback()
                } else {
                  callback(
                    this.$t('common.select') + this.$t('tenant.userManage.store')
                  )
                }
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ]
      },
      title: '',
      dialogVisible: false,
      info: {
        telephone: '',
        userName: '',
        email: '',
        sex: '',
        userType: '',
        store: null,
        storeList: [],
        areaCode: null
      },
      areaList: [],
      storeOption: []
    }
  },
  computed: {
    ...mapState({
      merchantCode: (state) => state.user.merchantCode
    })
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.info && this.$refs.info.clearValidate()
      })
    },
    showStore() {
      this.$refs.storeRef.blur()
      this.$refs.selectStore.oldSelect = this.info.store
      this.$refs.selectStore.show()
    },
    changeUserType(val) {
      // eslint-disable-next-line eqeqeq
      if (val == '1') {
        this.info.areaCode = ''
        this.info.store = []
        // eslint-disable-next-line eqeqeq
      } else if (val == '2') {
        this.getAreaList()
        this.info.store = []
      } else {
        this.info.areaCode = ''
      }
    },
    getAreaList() {
      merchantApi.getUserAreaList().then((res) => {
        this.areaList = res.data
      })
    },
    // 确定
    confirm() {
      this.$refs.info.validate((valid) => {
        if (valid) {
          const data = this.info
          if (data.store && data.store.length > 0) {
            data.storeList = data.store.map((v) => {
              return { storeCode: v }
            })
          }
          // eslint-disable-next-line eqeqeq
          if (this.title == this.$t('common.create')) {
            data.merchantCode = this.merchantCode
            merchantApi.addUser(data).then((res) => {
              this.$message.success(this.$t('common.addSuccess'))
              this.dialogVisible = false
              this.$emit('resetList')
            })
            // eslint-disable-next-line eqeqeq
          } else if (this.title == this.$t('common.edit')) {
            merchantApi.updateUser(data).then((res) => {
              this.$message.success(this.$t('common.editSuccess'))
              this.dialogVisible = false
              this.$emit('resetList')
            })
          }
        }
      })
    },
    confirmStore(data) {
      const store = data.map((v) => {
        return v.storeCode
      })
      this.storeOption = data
      this.info.store = store
    }
  }
}
</script>
<style lang="scss" scoped>
.input-custom {
  cursor: pointer;
  ::v-deep .el-input__inner {
    cursor: pointer;
  }
  ::v-deep .el-select__caret.el-input__icon.el-icon-arrow-up {
    background: url(../../../assets/head-icon01.png) no-repeat center center;
    &::before {
      content: '';
    }
  }
  ::v-deep .el-tag.el-tag--info .el-tag__close {
    display: none;
  }
}
</style>
